<template>
  <div>
    <h2>{{ this.id ? "编辑文章：" : "发布文章：" }}</h2>
    <el-form :model="models" label-width="100px" ref="modelsRef" :rules="rules">
      <el-form-item label="文章标题：" prop="title">
        <el-input v-model="models.title"></el-input>
      </el-form-item>
      <el-form-item label="文章简介：" prop="synopsis">
        <el-input v-model="models.synopsis"></el-input>
      </el-form-item>
      <el-form-item label="文章分类：" prop="classId">
        <el-select v-model="models.classId" placeholder="请选择分类">
          <el-option
            v-for="item in options"
            :key="item._id"
            :label="item.classname"
            :value="item._id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文章内容：" prop="text">
        <mavon-editor
          ref="md"
          id="editor"
          @change="changeEditor"
          v-model="models.text"
        />
      </el-form-item>
      <el-form-item label="是否展示：" prop="status">
        <el-radio v-model="models.status" label="1">是</el-radio>
        <el-radio v-model="models.status" label="2">否</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getArticleadd">发布文章</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getClasslist,
  getArticleadd,
  getArticledetail,
  getArticleLook,
} from "@/api/index.js";
export default {
  props: ["id"],
  data() {
    return {
      models: {
        status: "1",
      },
      options: [],
      rules: {
        title: [{ required: true, message: "请输入文章名称", trigger: "blur" }],
        synopsis: [
          { required: true, message: "请输入文章简介", trigger: "blur" },
        ],
        classId: [
          { required: true, message: "请选择文章分类", trigger: "change" },
        ],
        text: [{ required: true, message: "请输入文章内容", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getClasslist();
    this.id && this.getArticlelist();
  },
  methods: {
    // makedown编辑器
    changeEditor(value, render) {
      console.log(render);
      this.$set(this.models, "text", render);
      // this.models.text = render
    },
    // 获取分类列表
    getClasslist() {
      getClasslist().then((res) => {
        this.options = res.data.items;
      });
    },
    // 发布文章
    getArticleadd() {
      this.$refs.modelsRef.validate((vali) => {
        if (vali) {
          if (this.id) {
            getArticleLook(this.id, this.models).then((res) => {
              if (res.data.status == 200) {
                this.$message.success(res.data.msg);
                this.$router.push("/articleList");
              }
            });
          } else {
            getArticleadd(this.models).then((res) => {
              if (res.status == 200) {
                this.$message.success("发布成功！");
                this.$router.push("/articleList");
              }
            });
          }
        }
      });
    },
    // 发布文章
    getArticlelist() {
      getArticledetail(this.id).then((res) => {
        this.models = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
